import './login.css'
import logo1 from '../../assets/logo1.png'
import logo2 from '../../assets/logo2.png'

import React, {Component} from 'react';
import { Form, Input, Button, Checkbox, Card, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { Link } from "react-router-dom";
import PubSub from "pubsub-js";
import axios from 'axios'
import memoryUtils from "../../utils/memoryUtils";
import storageUtils from "../../utils/storageUtils";
import {Redirect} from "react-router";


export default class Login extends Component {

  onFinish = (values) => {
    let data = { username: values.username, password: values.password, remember: values.remember }
    let url = '/registrationapi/login'
    axios.post(url, data, {headers: {'Content-Type': 'application/json'}}
      ).then(res=>{
        if(res.status === 200 && res.data.code === 0){
            message.success('登录成功！')
            // 保存user
            const user = res.data.user
            memoryUtils.user = user
            storageUtils.saveUser(user)
            const flag = true
            PubSub.publish("sendLoginParam", flag)
            this.props.history.push('/index/start/home')
        } else{
            console.log(res)
            message.error('登录失败：' + res.data.msg)
        }
    })
  };

  render() {
    // 如果是已经登录的状态，则自动跳转到首页
    const user = memoryUtils.user
    if (user.id) {
      return <Redirect to="/index/start/home" />
    }

    return (
      <div className="login-content" style={{ height:'100%' }}>
        <div className="login-logo">
          <img width={150} src={logo1}/>
          <img width={300} src={logo2}/>
        </div>
        <Card className="login-card" title="智能口腔侧位片配准系统">
          <Form name="normal_login" className="login-form" initialValues={{ remember: true }} onFinish={this.onFinish}>
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入你的用户名！' }]}
            >
              <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入你的密码！' }]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="密码"
              />
            </Form.Item>
            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>记住密码</Checkbox>
              </Form.Item>
              <a className="login-form-forgot" href="">
                忘记密码？
              </a>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button">
                登录
              </Button>
              <a>
                <Link to="/register">
                  立即注册
                </Link>
              </a>
            </Form.Item>
          </Form>
        </Card>
      </div>
    );
  }
}

